<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="./css/awesome.css">
    <link rel="stylesheet" href="css/bottom.css">
    <link rel="stylesheet" href="css/banner.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="top">
    <ul>
        <li><a href="">请先登录</a></li>
        <li><a href="">免费注册</a></li>
        <li class="mark"><a href="">我的订单</a></li>
        <li class="divider"></li>
        <li class="mark"><a href="">会员中心</a></li>
        <li class="divider"></li>
        <li class="mark"><a href="">帮助中心</a></li>
        <li class="divider"></li>
        <li><a href="">关于我们</a></li>
        <li><a href=""><i class="fas fa-mobile-alt"></i>手机版</a></li>
    </ul>
</div>
<div class="header">
    <div class="container">
        <div class="logo">
            <a href=""><img src="./src/logo.png" alt="这是图片logo"></a>
        </div>
        <div class="nav" >
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">生鲜</a></li>
                <li><a href="">美食</a></li>
                <li><a href="">餐厨</a></li>
                <li><a href="">电器</a></li>
                <li><a href="">居家</a></li>
                <li><a href="">洗护</a></li>
                <li><a href="">育婴</a></li>
                <li><a href="">服装</a></li>
            </ul>
        </div>

        <div class="search">
            <form action="">
                <input type="text" placeholder="伍子怡23215220312">
                <button type="submit"><i class="fas fa-search"></i></button>
            </form>

        <div class="cart">
            <a href=""><i class="fas fa-shopping-cart"></i>购物车</a>
        </div>
        </div>
    </div>
</div>

<div class="banner">
    <div class="wrapper">
        <ul>
            <li class="banner-item active"><a href="#"><img src="./src/banner/1.png" alt=""></a></li>
            <li class="banner-item"><a href="#"><img src="./src/banner/2.jpg" alt="" style="width: 1240px;height: 500px;margin: 0 auto;"></a></li>
            <li class="banner-item"><a href="#"><img src="./src/banner/3.jpg" alt="" style="width: 1240px;height: 500px;margin: 0 auto;"></a></li>
            <li class="banner-item"><a href="#"><img src="./src/banner/4.jpg" alt="" style="width: 1240px;height: 500px;margin: 0 auto;"></a></li>
            <li class="banner-item"><a href="#"><img src="./src/banner/5.jpg" alt="" style="width: 1240px;height: 500px;margin: 0 auto;"></a></li>
        </ul>
        <div class="aside">
            <ul>
                <li><a href="">生鲜<span>水果 蔬菜</span></a></li>
                <li><a href="">美食<span>面包 干果</span></a></li>
                <li><a href="">电器<span>数码产品</span></a></li>
                <li><a href="">居家<span>床品 四件套 被枕</span></a></li>
                <li><a href="">洗护<span>洗发洗护 美妆</span></a></li>
                <li><a href="">孕婴<span>奶粉 玩具 辅食</span></a></li>
                <li><a href="">餐厨<span>数码产品</span></a></li>
                <li><a href="">服饰<span>女装 男装</span></a></li>
                <li><a href="">杂货<span>户外 图书</span></a></li>
                <li><a href="">品牌<span>品牌制造</span></a></li>
            </ul>
        </div>
        <!-- 箭头 -->
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
        <!-- 圆点 -->
        <ol>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</div>

<div class="goods wrapper">
    <div class="hd">
        <h2>新鲜好逛<span>新鲜出炉 品质靠谱</span></h2>
        <a href="#" >查看全部</a>
    </div>
    <div class="bd " >
        <ul>
            <li class="goods-item"><a href="">
                <img src="./src/goods/new_goods_1.jpg" >
                 <h3>小米无线吸尘器</h3><div class="goods-price"><span>¥</span>899</div></a>
            </li>
            <li class="goods-item"><a href="">
                <img src="./src/goods/new_goods_2.jpg">
                 <h3>智能环绕3D空调</h3><div class="goods-price"><span>¥</span>1299</div></a></li>
            <li class="goods-item"><a href="">
                <img src="./src/goods/new_goods_3.jpg">
                 <h3>广东软软糯米煲仔饭</h3><div class="goods-price"><span>¥</span>129</div></a></li>
            <li class="goods-item"><a href="">
                <img src="./src/goods/new_goods_4.jpg">
                <h3>罗西机械智能手表</h3><div class="goods-price"><span>¥</span>3399</div>
                </a></li>
        </ul>
    </div>
</div>
<div class="goods wrapper">
    <div class="hd">
        <h2>人气推荐<span>人气爆款 不容错过</span></h2>
    </div>
    <div class="bd " >
        <ul>
            <li class="popular-item"><a href="">
                <img src="./src/goods/popular_1.jpg" >
                <h3>特惠推荐</h3><span>我猜得到 你的需要</span></a>
            </li>
            <li class="popular-item"><a href="">
                <img src="./src/goods/popular_2.jpg" >
                <h3>爆款推荐</h3><span>人气好物推荐</span></a></li>
            <li class="popular-item"><a href="">
                <img src="./src/goods/popular_3.jpg" >
                <h3>场景使用一站买全</h3><span>编辑精心整理推荐</span></a></li>
            <li class="popular-item"><a href="">
                <img src="./src/goods/popular_4.jpg" >
                <h3>领卷中心</h3><span>发现超多优惠卷</span></a></li>
        </ul>
    </div>
</div>

<div class="goods wrapper">
    <div class="hd">
        <h2>热门品牌<span>国际经典 品质保证</span></h2>
        <a href="#" >查看全部</a>
    </div>
    <div class="bd " >
        <ul>
            <li class="brand-item"><a href="">
                <img src="./src/goods/brand_goods_1.jpg" ></a></li>
            <li class="brand-item"><a href="">
                <img src="./src/goods/brand_goods_2.jpg" ></a></li>
            <li class="brand-item"><a href="">
                <img src="./src/goods/brand_goods_3.jpg" ></a></li>
            <li class="brand-item"><a href="">
                <img src="./src/goods/brand_goods_4.jpg" ></a></li>
        </ul>
    </div>
</div>
<div class="shenxian wrapper">
    <div class="hd">
        <h2>生鲜</h2>
        <a href="#" class="more">查看全部</a>
        <ul>
            <li><a href="#" class="title">水果</a></li>
            <li><a href="#" class="title">蔬菜</a></li>
            <li><a href="#" class="title">肉禽蛋</a></li>
            <li><a href="#" class="title">水产</a></li>
            <li><a href="#" class="title">速食</a></li>
            <li><a href="#" class="title">乳品</a></li>
            <li><a href="#" class="title">熟食</a></li>
        </ul>
    </div>
    <div class="bd clearfix">
        <div class="left">
            <a href="#">
                <img src="./src/goods/fresh_goods_cover.png" alt="生鲜封面图">
            </a>
        </div>
        <div class="right">
            <ul>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_1.jpg" alt="">
                        <h3>美威 智利原味三文鱼排 240g/袋</h3>
                        <p>海鲜年货</p>
                        <div class="price">¥59</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_2.jpg" alt="">
                        <h3>红功夫 麻辣小龙虾1.5kg</h3>
                        <p>火锅食材</p>
                        <div class="price">¥79</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_3.jpg" alt="">
                        <h3>三都港 冷冻无公害黄花鱼 700g</h3>
                        <p>海鲜水产</p>
                        <div class="price">¥49</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_4.jpg" alt="">
                        <h3>渔公码头 大连鲜食入味即食海参</h3>
                        <p>调味海产</p>
                        <div class="price">¥899</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_5.jpg" alt="">
                        <h3>越南白心火龙果4个装</h3>
                        <p>新鲜水果</p>
                        <div class="price">¥20</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_6.jpg" alt="">
                        <h3>广西沃柑 新鲜水果 柑橘1.5kg</h3>
                        <p>新鲜水果</p>
                        <div class="price">¥10</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_7.jpg" alt="">
                        <h3>进口牛油果 6个装</h3>
                        <p>新鲜水果</p>
                        <div class="price">¥50</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
                <li class="fresh-item">
                    <a href="#">
                        <img src="./src/goods/fresh_goods_8.jpg" alt="">
                        <h3>泰国进口山竹5A级500g</h3>
                        <p>新鲜水果</p>
                        <div class="price">¥60</div>
                        <div class="popup">找相似，发现更多宝贝</div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="bottom">
    <div class="extra">
        <div class="wrapper">
            <div class="slogan">
                <a href="#" class="price">价格亲民</a>
                <a href="#" class="express">物流快捷</a>
                <a href="#" class="quality">品质新鲜</a>
            </div>

            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>
                    <a href="#">帮助中心</a>
                    <a href="#">售后服务</a>
                    <a href="#">配送与验收</a>
                    <a href="#">商务合作</a>
                    <a href="#">搜索推荐</a>
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function() {

        const bannerItems = document.querySelectorAll('.banner .wrapper ul .banner-item');
        const prevBtn = document.querySelector('.banner .prev');
        const nextBtn = document.querySelector('.banner .next');
        const dots = document.querySelectorAll('.banner ol li');


        let currentIndex = 0;
        const itemCount = bannerItems.length;
        const intervalTime = 3000;
        let intervalId;

        function initSlider() {

            updateSlideDisplay();

            startAutoPlay();

            prevBtn.addEventListener('click', prevSlide);
            nextBtn.addEventListener('click', nextSlide);

            dots.forEach((dot, index) => {
                dot.addEventListener('click', () => {
                    goToSlide(index);
                });
            });

            const bannerWrapper = document.querySelector('.banner .wrapper');
            bannerWrapper.addEventListener('mouseenter', pauseAutoPlay);
            bannerWrapper.addEventListener('mouseleave', startAutoPlay);
        }

        // 更新幻灯片显示状态
        function updateSlideDisplay() {
            bannerItems.forEach((item, index) => {
                item.style.display = index === currentIndex ? 'block' : 'none';
            });
            updateDots();
        }

        // 切换到指定幻灯片
        function goToSlide(index) {
            currentIndex = index;

            // 确保索引在有效范围内
            if (currentIndex < 0) {
                currentIndex = itemCount - 1;
            } else if (currentIndex >= itemCount) {
                currentIndex = 0;
            }

            updateSlideDisplay();
        }

        // 切换到上一张幻灯片
        function prevSlide(e) {
            e.preventDefault();
            goToSlide(currentIndex - 1);
            // 重置自动轮播计时器
            resetAutoPlay();
        }

        // 切换到下一张幻灯片
        function nextSlide(e) {
            e.preventDefault();
            goToSlide(currentIndex + 1);
            // 重置自动轮播计时器
            resetAutoPlay();
        }

        // 更新圆点状态
        function updateDots() {
            dots.forEach((dot, index) => {
                dot.classList.toggle('active', index === currentIndex);
            });
        }

        // 开始自动轮播
        function startAutoPlay() {
            intervalId = setInterval(() => {
                goToSlide(currentIndex + 1);
            }, intervalTime);
        }

        // 暂停自动轮播
        function pauseAutoPlay() {
            if (intervalId) {
                clearInterval(intervalId);
                intervalId = null;
            }
        }

        // 重置自动轮播
        function resetAutoPlay() {
            pauseAutoPlay();
            startAutoPlay();
        }

        // 初始化轮播图
        initSlider();
    });
</script>
</body>
</html>
